<!-- @format -->

<!-- 
 @Authors:'小陆同学'
 @EndTime:'2023-08-27 01:05'
 -->
<template>
	<view class="l-text" @click="$emit('click')">
		<l-icon style="margin-right: 5px" v-if="prefixIcon" :name="prefixIcon" :color="iconColor" :type="iconType" :size="iconSize" :bold="iconbold"></l-icon>
		<text @click="$emit('click')" :decode="decode" space="nbsp" :class="[`l-text-${type}`, 'l-text-lines']" :style="[textStyle]">
			<slot></slot>
		</text>
		<l-icon style="margin-left: 5px" v-if="suffixIcon" :name="suffixIcon" :color="iconColor" :type="iconType" :size="iconSize" :bold="iconbold"></l-icon>
		<button v-if="openType" class="l-text-btn" :open-type="openType" @click.stop="bindOpenType"></button>
	</view>
</template>

<script>
	import props from "./props.js";
	export default {
		name: "l-text",
		mixins: [props],
		watch: {
			// 是否连续空格
			space: {
				handler(val) {
					!val ? (this.spaceType = undefined) : (this.spaceType = "nbsp");
				},
				immediate: true,
			},
		},
		computed: {
			// 文本样式
			textStyle() {
				const style = {
					fontWeight: this.bold && "bolder",
					fontSize: uni.$lu.addUnit(this.size),
					WebkitLineClamp: this.lines,
				};
				return uni.$lu.addStyle(style);
			},
		},
		data() {
			return {
				spaceType: undefined,
			};
		},
		methods: {
			// 微信开放能力
			bindOpenType(e) {
				this.$emit("click", e);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.l-text {
		@include flex;
		@include them;
		align-items: center;
		position: relative;

		&-btn {
			position: absolute;
			inset: 0;
			display: block;
			opacity: 0;
		}

		&-lines {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
	}
</style>
